<template>
  <el-card class="common-card">
      <div class="title">{{title}}</div>
      <div class="value">{{value | moneyFormat}}</div>
      <div class="chart">
        <slot></slot>
      </div>
      <div class="line"></div>
      <div class="title">
        <slot name="total"></slot>
      </div>   
      
  </el-card>
</template>

<script>
export default {
name:"CommonCard",
props: ["title","value"]
}
</script>

<style lang="scss">
  .common-card {
    .title {
      color: #999;
      font-size: 12px;
    }
    .value {
      font-size: 25px;
      color: #000;
      letter-spacing:1px;
      margin: 5px 0;
    }
    .chart {
      height:50px;
      // background:#999;
    }
    .line {
      border: 1px solid #eee;
      margin: 5px 0;
    }
    .total {
      font-size: 10px;
      color: #333;
    }
  }
</style>